<template>
  <swiper :options="swiperOption" v-if="showSwiper">
    <swiper-slide v-for="(page,index) of pages" :key="index">
    <div class="icons">
      <div class="icon" v-for="item of page" :key="item.id">
          <i class="icon-img">
            <img :src="item.url">
          </i>
          <p>{{item.desc}}</p>
      </div>
    </div>
    </swiper-slide>
  </swiper>
</template>

<script>
    export default {
        name: "HomeIcons",
      data (){
          return {
            swiperOption:{
              loop:true
            }
          }
      },
        props:{
          iconList:Array
        },
      computed:{
          pages (){
            let pages = [];
            this.iconList.forEach((item,index) => {
              let page = Math.floor(index/8);
              if(!pages[page]){
                pages[page] = []
              }
              pages[page].push(item);
            });
            return pages;
          },
        showSwiper(){
            return this.iconList.length;
        }
      }
    }
</script>

<style scoped lang="stylus">
  @import "~styles/stylus/mixins.styl"
  .icons
    height 50%
    display flex
    flex-wrap wrap
    .icon
      width 25%
      height  1.52rem
      align-items   center
      display flex
      flex-direction column
      padding 0.3rem 0 0 0
      p
        color $baseFontColor
      .icon-img
        width .84rem
        height .84rem
        display block
        margin-bottom 0.2rem
        img
          width 0.84rem
          height .84rem
</style>
